<template>
  <div class="pash-domain-table">
    <Table
      :loading="loading"
      ref="pushDomianTable"
      :columns="columns"
      :data="list"
      :disabled-hover="true"
      @on-select="onSelectEvent"
      @on-select-cancel="onSelectCancelEvent"
      @on-select-all="onSelectAllEvent"
      @on-select-all-cancel="onSelectAllCancelEvent"
      stripe
    ></Table>
    <div class="form-page-bottom-area flx-row-c-c">
      <Page
        :total="pageData.total"
        :current="pageData.page"
        :page-size="pageData.limit"
        :page-size-opts="pageData.pageSizeOpts"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        show-elevator
        show-sizer
        show-total
      />
    </div>
  </div>
</template>
<script>
import { uniq, remove, union, xor } from "lodash";
import storage from "@/utils/storage";
import analysisDoMainTableTool from "_c/operateTool/analysisDoMainTableTool";

export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    pageData: {
      type: Object,
      default: () => {
        return {
          total: 0,
          page: 1,
          limit: 10,
          pageSizeOpts: [10, 15, 20],
        };
      },
    },
  },
  data() {
    return {
      columns: [
        {
          width: 60,
          type: "selection",
          align: "center",
        },
        {
          width: 60,
          title: "序号",
          type: "index",
          align: "center",
        },
        {
          title: "主机记录",
          key: "host",
          align: "center",
        },
        {
          width: 100,
          title: "记录类型",
          key: "type",
          align: "center",
        },
        {
          title: "记录值",
          key: "value",
          align: "center",
        },
        {
          title: "线路类型",
          key: "lineName",
          align: "center",
        },
        {
          width: 100,
          title: "MX优先级",
          key: "mx",
          align: "center",
        },
        {
          title: "TLL",
          key: "ttl",
          align: "center",
        },
        {
          title: "更新时间",
          key: "updatedTime",
          align: "center",
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          render: (h, params) => {
            let title = params.row.status === 1 ? "正常" : "暂停";
            return h("span", title);
          },
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h(analysisDoMainTableTool, {
              props: {
                status: params.row.status,
              },
              on: {
                clickEvent: (val) => {
                  this.$emit("operationEvent", { type: val, data: params.row });
                },
              },
            });
          },
        },
      ],
    };
  },
  methods: {
    pageChange(val) {
      this.$emit("pageChange", val);
    },
    pageSizeChange(val) {
      this.$emit("pageSizeChange", val);
    },
    // checkbox单个选中数据
    onSelectEvent(selection, row) {
      // ("checkbox单个选中数据");
      let array = storage.getPushSelectDomian();
      // array.push(row);
      // storage.setPushSelectDomian(this._.uniqWith(array, this._.isEqual));
      array.push(row.id);
      storage.setPushSelectDomian(uniq(array));
    },
    // checkbox单个取消数据
    onSelectCancelEvent(selection, row) {
      let array = storage.getPushSelectDomian();
      // this._.remove(array, (o) => {
      //   return o.id === row.id;
      // });
      remove(array, (o) => {
        return o === row.id;
      });
      storage.setPushSelectDomian(array);
    },
    // checkbox全选的数据
    onSelectAllEvent(selection) {
      let array = storage.getPushSelectDomian();
      // let newArray = this._.unionWith(array, selection, this._.isEqual);
      // storage.setPushSelectDomian(newArray);
      let tempArray = selection.map((o) => {
        return o.id;
      });
      let newArray = union(array, tempArray);
      storage.setPushSelectDomian(newArray);
    },
    // checkbox取消全选的数据
    onSelectAllCancelEvent() {
      let array = storage.getPushSelectDomian();
      // let newArray = this._.intersectionWith(array, selection, this._.isEqual);bi
      // storage.setPushSelectDomian(newArray);
      let tempArray = this.list.map((o) => {
        return o.id;
      });
      let newArray = xor(array, tempArray);
      storage.setPushSelectDomian(newArray);
    },
  },
  components: {},
  created() {},
  mounted() {
    this.cacheArray = [];
  },
};
</script>
<style lang="scss" scoped>
.pash-domain-table /deep/ {
  .form-page-bottom-area {
    border: none;
  }
  .ivu-table-wrapper {
    .ivu-table-cell {
      color: #000;
      &:nth-child(1) {
        padding-left: 10px;
        padding-right: 10px;
      }
    }

    .ivu-table-row {
      &:hover {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        transform: scale(1.01);
      }
    }
  }
}
</style>
